<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			html,
			body {
				background-color: #FFFFFF;
			}
			
			.bg-color {
				background-color: #3B559F;
				box-shadow: none;
				padding-left: 0!important;
			}
			
			.bg-color div {
				font-size: 130%;
				color: #FFFFFF;
				margin-left: 2%;
				margin-top: 4%;
			}
			
			.mui-pull-left {
				position: absolute;
				color: #FFFFFF;
				bottom: 10px;
				margin-left: 3%;
				font-size: 110%;
			}
			
			.mui-table-view {
				width: 100%;
				background-color: #FFFFFF;
				padding: 0!important;
				margin-top: 0!important;
				border-bottom: 0!important;
			}
			
			li {
				list-style: none;
				border-bottom: 1px solid #F2F2F2;
				padding-bottom: 0;
				margin-top: 0;
				padding: 0!important;
			}
			
			.mui-table-view:after{
				background-color: #FFFFFF!important;
			}
			
			.mui-table-view-cell:after{
				background-color: #FFFFFF!important;
			}
			
			.mui-btn-red{
				font-size: 90%!important;
			}
			
			.news-div {
				width: 100%;
				display: flex!important;
				flex-wrap: wrap!important;
				align-items: center;
				padding: 3% 0;
			}
			
			.news-div img {
				width: 12%;
				margin-left: 3%;
				margin-right: 3%;
			}
			
			.div1 {
				width: 79%;
				margin-top: 1%;
			}
			
			.div2 {
				font-size: 90%;
			}
			
			.div2 text {
				float: right;
				color: #AFAFAF;
				font-size: 75%;
			}
			
			.div1 span {
				color: #AFAFAF;
				font-size: 75%;
			}
			
			.mui-badge{
				background-color: #F74040;
				color: #FFFFFF!important;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar bg-color mui-bar-nav" id="header">
			<a class="mui-pull-left">论语</a>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" id="ulcontent">
			</ul>

		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/immersed.js"></script>
		<script src="../js/arttmpl.js"></script>
		<script type="text/javascript">
			(function($) {
				$.init();
				$.plusReady(function() {
					starbar();
					mui('.mui-table-view').on('touchstart', '.mui-table-view-cell', function() {
						this.style.cssText = 'background-color: #F7F7F7'
					}, false);
					mui('.mui-table-view').on('touchend', '.mui-table-view-cell', function() {
						this.style.cssText = 'background-color: #FFFFFF';
					}, false);
					mui('.mui-table-view').on('tap', '.mui-table-view-cell', function() {
						mui.openWindow({
							url: 'news/chat.html',
							id: 'news/chat.html'
						})
					}, false);

					var first = null;
					mui.back = function() {
						mui.plusReady(function() {
							//首页返回键处理
							//处理逻辑：1秒内，连续两次按返回键，则退出应用；
							if(!first) {
								first = new Date().getTime();
								mui.toast('再按一次退出应用');
								setTimeout(function() {
									first = null;
								}, 1000);
							} else {
								if(new Date().getTime() - first < 1000) {
									plus.runtime.quit();
								}
							}
						});
					}
				})
				$.ready(function() {
					var contenttext = [{
						imgs: '../images/timg10.jpg',
						nickname: '阳光飞',
						time: "昨天1:40",
						gettext: '的风格艺人他会不会发货给他',
						newsnum: "1"
					}, {
						imgs: '../images/11298122748b742d0co.jpg',
						nickname: '受到惩罚鱼',
						time: "15:40",
						gettext: '风格化风格化规范化广泛',
						newsnum: "4"
					}, {
						imgs: '../images/1.jpg',
						nickname: '拉夫提',
						time: "15:55",
						gettext: '犹太家庭与建议添加用户推进海南国际工会',
						newsnum: "6"
					}, {
						imgs: '../images/2.jpg',
						nickname: '皮阿',
						time: "16:10",
						gettext: '老婆回家看预告',
						newsnum: "3"
					}, {
						imgs: '../images/11.jpg',
						nickname: '凤尾鱼',
						time: "16:20",
						gettext: '从v不错调查v地方v发',
						newsnum: "10"
					}]
					var str = template('list-news', {
						"record": contenttext
					});
					document.getElementById('ulcontent').innerHTML = str;
					var viewwidth = document.body.clientWidth;
					var imgchan = document.getElementsByClassName('news-div');
					for(var i = 0; i < imgchan.length; i++) {
						imgchan[i].getElementsByTagName('img')[0].style.height = "-webkit-calc(" + viewwidth * 0.12 + "px)";
					}
				})
			})(mui);
		</script>
		<!--列表渲染模板-->
		<script type="text/template" id="list-news">
			<% for(var i in record){ var item=record[i]; %>
			<li id="news-div" class="licontent mui-table-view-cell">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red mui-icon">删除</a>
				</div>
				<div class="mui-slider-handle" id="news-div-item">
					<div class="mui-table-cell news-div">
						<img src="<%=item.imgs%>"/>
						<div class="div1">
							<div class="div2">
								<%=item.nickname%>
								<text><%=item.time%></text>
							</div>
							<span id="chatcont"><%=item.gettext%></span>
							<div class="" style="float: right;margin-right: 3%;">
								<span class="mui-badge"><%=item.newsnum%></span>
							</div>
							
						</div
					</div>
				</div>
			</li>
			<% } %>
		</script>
	</body>

</html>